import React, { useEffect } from 'react'
import { Layout } from 'antd';
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import SideMenu from '../../components/newsSandBox/SideMenu.js'
import TopHeader from '../../components/newsSandBox/TopHeader.js'
import './NewsSandBox.css'
import NewsRouter from './NewsRouter.js'
import { useSelector } from 'react-redux';

const { Content } = Layout;

export default function NewsSandBox() {
	const token = useSelector(state => state.TokenReducer.token)
	NProgress.start()
	useEffect(() => {
		if (token) {
			NProgress.done()
		}
	}, [token])

	return (
		<Layout className='box-container'>
			<SideMenu />
			<Layout className="site-layout">
				<TopHeader />
				<Content
					className="site-layout-background"
					style={{
						margin: '24px 16px',
						padding: 24,
						minHeight: 280,
						overflow: "hidden"
					}}>
					<NewsRouter />
				</Content>
			</Layout>
		</Layout>
	)
}